<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{
            font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
            color: #333;
            background-color: #fff;
            min-width: 1226px;
        }
        .a1{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            text-decoration: none;
            font-size: 12px;
        }
        .a1:hover{
            color: white;
        }
        .header_s{
            color: #424242;
            margin: 0 4px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="border: 1px solid red">
            <div style="height: 40px;background-color:#333;color: #b0b0b0;">
                <div style="width: 1226px;margin: 0 auto;">
                    <div style="float: left">
                        <a class="a1" href="">小米商城</a><span class="header_s">|</span>
                        <a class="a1" href="">MIUI</a><span class="header_s">|</span>
                        <a class="a1" href="">loT</a><span class="header_s">|</span>
                        <a class="a1" href="">天星数科</a><span class="header_s">|</span>
                        <a class="a1" href="">有品</a><span class="header_s">|</span>
                        <a class="a1" href="">小爱开放平台</a><span class="header_s">|</span>
                        <a class="a1" href="">企业团购</a><span class="header_s">|</span>
                        <a class="a1" href="">资质团购</a><span class="header_s">|</span>
                        <a class="a1" href="">协议规则</a><span class="header_s">|</span>
                        <a class="a1" href="">下载app</a><span class="header_s">|</span>
                        <a class="a1" href="">Select Location</a>
                     </div>
                    <div style="float: right">
                        <a class="a1" href="">登录</a><span class="header_s">|</span>
                        <a class="a1" href="">注册</a><span class="header_s">|</span>
                        <a class="a1" href="">消息通知</a>
                    </div>
                </div>
            </div>

            <div style="width: 1200px;height: 100px;margin: 30px auto;">
                <div style="float:left;margin: auto ">
                    <a href="" style="width: 56px;height: 56px;display: inline-block">
                        <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" style="height: 100%;width: 100%" alt=""></a>
                </div>
                <div style="float:left;margin: auto 0 auto 150px;height: 56px">
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="1">Xiaomi手机</el-menu-item>
                        <el-menu-item index="2">Redmi红米</el-menu-item>
                        <el-menu-item index="3">电视</el-menu-item>
                        <el-menu-item index="4">笔记本</el-menu-item>
                        <el-menu-item index="5">平板</el-menu-item>
                        <el-menu-item index="6">家电</el-menu-item>
                        <el-menu-item index="7">路由器</el-menu-item>
                        <el-menu-item index="8">服务</el-menu-item>
                        <el-menu-item index="9">社区</el-menu-item>
                    </el-menu>
                </div>
                <div style="float:right;margin: auto 0;width: 206px;height: 56px">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </div>
            </div>
        </el-header>
        <el-main style="width: 1226px;margin: 0 auto;height: 1000px;border: 1px solid red">
            <div>

            </div>
            <div style="width: 240px;height: 420px;padding:20px 0;
                    border: 0;color: #fff;background: rgba(105,101,101,.6);">

            </div>
        </el-main>

        <el-footer  style="width: 1226px;margin: 0 auto;height: 1000px;border: 1px solid red">

        </el-footer>
    </el-container>

</div>
</body>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                input: ''
            }
        },
        methods: {
            handleSelect() {
            },
            f(command){
                //将传过来的值  赋值给info
                //this代表当前实例化的Vue对象
                this.info=command;
            }
        }
    })
</script>
</html>